<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="vue.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<body>

    <div id="app">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">标题</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" v-model="filed.title"  placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">内容</label>
                <div class="col-sm-10">
                    <textarea v-model="filed.comment">

                    </textarea>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword4" class="col-sm-2 control-label">点击量</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputPassword4" v-model="filed.click" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword4" class="col-sm-2 control-label">点击量</label>
                <div class="col-sm-10">
                    <input type="checkbox" v-model="filed.true" placeholder="Password">草稿{{filed.true}}
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword4" class="col-sm-2 control-label">属性</label>
                <div class="col-sm-10">
                    {{filed.property}}
                    <input type="radio" v-model="filed.property"  value="game">游戏
                    <input type="radio" v-model="filed.property"  value="course">教程
                </div>
                <div class="col-sm-10">
                    {{filed.cid}}
                    <select v-model="filed.cid" multiple>
                        <option value="">请选择</option>
                        <option v-for="v in category" :value="v.cid" >{{v.title}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">发表</button>
                </div>            </div>

        </form>
    </div>

<script>
    var app=new Vue({
        el:'#app',
        data: {
            category:[
                {cid:1,title:'新闻'},
                {cid:2,title:'游戏'},
                {cid:3,title:'娱乐'},
                {cid:4,title:'明星'},
                {cid:5,title:'八卦'},
            ],
            filed:
                {
                    title:'后端君',
                    comment:'走丽水',
                    click:'200',
                    true:false,
                    property:'game',
                    cid:[]
                },


        },
        methods:{
            test(){
                alert('sadf');
            }


            },


    });

</script>
</body>
</html>